<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<title>Axios应用程序</title>
		<!-- https://v2.cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88(官网链接) -->
	</head>
	<body>
		<div id="app">
			<div>

				名称：{{info.name}}
			</div>
			<div>
				url：<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
			</div>

			<ul>

				<li v-for="link in info.links">

					{{link.name}}--->{{link.url}}

				</li>

			</ul>

		</div>
		<script>
			var app = new Vue({
				el: '#app',
				// 可以搜一下data属性和data方法的区别，两种写法在这里都可以，
				// 主要区别在于data属性是全局共用的，为了防止数据污染一般用data方法
				data() {

					return {

						info: {
							name: '',
							url: '',
							links: []
						}


					}

				},

				mounted() {
					axios.get('/data.json')
						.then(Response => this.info = Response.data)
				}



			})
		</script>
	</body>
</html>